<template>
  <!--表格对象-->
  <Table
    ref="tableRef"
    :table="table"
    :tableColumns="tableColumns"
    :loadTableList="loadTableList"
    :changePageSize="changePageSize"
    :changePage="changePage"
    :deleteMultipleSelectionUrl="$urls.API_URL_BACKSTAGE_DICT_MANAGE"
    :showToolBar="true"
    :showRightToolBar="false"
    :showToolBarEditButton="true"
    :showOperatorColumn="false"
    :showTableIndex="true"
    paginationLayout="total,prev,pager,next"
  >
  </Table>
</template>

<script lang="ts" setup>
// 导入表格组件
import Table from '@/components/base/table/Table.vue';
import {
  defineExpose,
  defineProps, getCurrentInstance, onMounted, ref,
} from 'vue';
import { TableColumn, TableData } from '@/types/interface/base_interface';
import { yesOrNoDict } from '@/api/dict';
import { ElTable } from 'element-plus';
import { TableRef } from '@/types/interface/base_ref_interface';

const { proxy } = getCurrentInstance(); // 使用proxy代替ctx，因为ctx只在开发环境有效
// 接收父组件传递过来的值
interface Props {// 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  table: TableData, // 表格对象，包含表格数据和分页信息。表格数据实际业务并不需要，偷懒写法
  loadTableList:()=>void, // 重新加载表格
  changePageSize:()=>void, // 当每页数据显示数发生变化时触发的一个函数
  changePage:()=>void, // 当页面发生变化时触发的一个函数
}
const props = defineProps<Props>();

// 定义表格所有的列字段信息
const tableColumns = ref<TableColumn[]>([
  {
    label: '字典名称',
    prop: 'name',
  },
]);

// 定义属性菜单的ref对象
const tableRef = ref<TableRef>();
const getSelectionRows = () => tableRef.value!.getSelectionRows();
const toggleRowSelection = (row:any, selected:boolean) => tableRef.value!.toggleRowSelection(row, selected);
// onMounted(() => {
//   console.log(props.table.data.length);
//   if (props.table.data.length > 0) {
//     tableRef.value!.toggleRowSelection(props.table.data[0], true);
//   }
// });
defineExpose({ // 参考vue3官方文档，需要将函数暴露出去才能被父组件调用，setup模式是不暴露的
  getSelectionRows,
  toggleRowSelection,
});
// console.log(tableRef.value!.getSelectionRows());

// 表格的行点击事件
// const rowClick = (row:any):void => {
//   proxy.$emit('rowClick', row);
// };
</script>

<style scoped>

</style>
